<template>
  <div class="demo">
    <div class="demo-title">位置</div>
    <div class="demo-content">
      <Button type="primary" @click="openNotification('topLeft')">
        <RadiusUpleftOutlined />
        topLeft
      </Button>
      <Button type="primary" @click="openNotification('topRight')">
        <RadiusUprightOutlined />
        topRight
      </Button>
      <Divider />
      <Button type="primary" @click="openNotification('bottomLeft')">
        <RadiusBottomleftOutlined />
        bottomLeft
      </Button>
      <Button type="primary" @click="openNotification('bottomRight')">
        <RadiusBottomrightOutlined />
        bottomRight
      </Button>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import {
    RadiusUpleftOutlined,
    RadiusUprightOutlined,
    RadiusBottomleftOutlined,
    RadiusBottomrightOutlined,
  } from '@ant-design/icons-vue';
  import Button from '@sscd/button';
  import Divider from '@sscd/divider';
  import Notification from '@sscd/notification';
  import type { NotificationPlacement } from '@sscd/notification';
  const openNotification = (placement: NotificationPlacement) => {
    Notification.open({
      message: `Notification ${placement}`,
      description:
        'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
      placement,
    });
  };
</script>
